<template>
  <div class="Echarts" style="width:1200px; height:840px;">
    <div v-show="!this.wait && this.size!=0 && !this.noway" id="tubiaomain" style="width:1200px; height:840px;"></div>
		<div v-show="this.wait || this.size==0 || this.noway" class="nodata">
			<div v-if="this.wait" style="position: absolute; top: 300px; left: 522px;letter-spacing: 9px;opacity: 0.8;">正在拼命加载中...</div>
			<div v-else style="position: absolute; top: 300px; left: 800px;letter-spacing: 9px;opacity: 0.8;">暂无数据</div>
		</div>
  </div>
</template>
 
<script>
export default {
  name: 'Echarts',
  data() {
  	return{
			nodes:[],
			links:[],
			categories:[],
			legend_categories: {},
			size: 1,
			repulsion: 150,
			symbolSize: 400,
			edgeLength: 200,
			width: 1,
			myChart: null,
			wait: true,
			country: '',
			noway: false
			// green:
		}
  },
	props: {},
  methods: {
		async getList(){
			this.noway = false
			 console.log('1111: ');
			// await this.$api.get('/es/jsc/cyjh_main',{industry: '下游'})
			this.wait = true
			await this.$api.get('/es/jsc/cyjh_main',{industry: this.name2, xfhy: this.name3})
			// await this.$api.get('/es/jsc/qyjh_csnb?city=宁波市&industry=中游')

				.then((response) => {
					let {nodes, links, categories} = {...response.data}
					let mycategories = eval(categories)
					let mynodes = eval(nodes)
					this.wait = false
					this.size = mynodes.length
					if(this.size == 0){
						console.log('暂无数据')
						this.myChart.clear()
						return
					}
					this.judge()
					console.log('size为： ', this.name2, this.name3,this.size, this.repulsion, this.symbolSize, this.edgeLength, this.width);
					// this.links = eval(links)
					let mylinks = eval(links)
					mylinks.forEach(link => {
						if(link.lineStyle.color=='green'){
							link.lineStyle.color='#00D1AD'
						}else{
							link.lineStyle.color = '#9E0D0D'
						}
						// if(link.lineStyle.width){
							link.lineStyle.width =  Math.min(link.value*this.width, 8)
							// console.log(link.lineStyle.width ,link.value, this.width)
						// }
						link.lineStyle.join = 'round'
					})
					mynodes.forEach(node => {
						node.symbolSize = this.symbolSize
					})
					this.links = mylinks
					this.nodes = mynodes
					mycategories.forEach(element => {
						// console.log(element);
						this.categories.push({"name": element})
						this.legend_categories[element] = true
					})
					// console.log(this.legend_categories)
					this.myEcharts()
					console.log(this.wait,this.size,this.noway)
				})
				.catch((error) => {
					this.wait = false
					this.size==0
					console.log('暂无数据')
					this.myChart.clear()
					console.log(error)
				})
	  },
		async getList2(){
			this.noway = false
			this.wait = true
			console.log('getlist2',this.country,this.name3);
			await this.$api.get('/es/jsc/cyjh_zdwq',{country: this.country, xfhy: this.name3})
			// await this.$api.get('/es/jsc/qyjh_csnb?xfhy=钕铁硼永磁&country=日本')

				.then((response) => {
					let {nodes, links, categories} = {...response.data['主图数据']}
					let mycategories = eval(categories)
					let mynodes = eval(nodes)
					this.wait = false
					this.size = mynodes.length
					if(this.size == 0){
						console.log('暂无数据')
						this.myChart.clear()
						return
					}
					this.judge()
					console.log('size为： ', this.name2, this.name3,this.size, this.repulsion, this.symbolSize, this.edgeLength, this.width);
					// this.links = eval(links)
					let mylinks = eval(links)
					mylinks.forEach(link => {
						if(link.lineStyle.color=='green'){
							link.lineStyle.color='#00D1AD'
						}else{
							link.lineStyle.color = '#9E0D0D'
						}
						// if(link.lineStyle.width){
							link.lineStyle.width =  Math.min(link.value*this.width, 8)
							// console.log(link.lineStyle.width ,link.value, this.width)
						// }
						link.lineStyle.join = 'round'
					})
					mynodes.forEach(node => {
						node.symbolSize = this.symbolSize
					})
					this.links = mylinks
					this.nodes = mynodes
					mycategories.forEach(element => {
						// console.log(element);
						this.categories.push({"name": element})
						this.legend_categories[element] = true
					})
					// console.log(this.legend_categories)
					this.myEcharts()
				})
				.catch((error) => {
					this.noway = true
					this.wait = false
					this.size == 0
					console.log('暂无数据')
					this.myChart.clear()
					console.log(error)
				})
		},
    myEcharts(){
			// console.log(this.nodes)
      // this.myChart = this.$echarts.init(document.getElementById('tubiaomain'),'white', {renderer: 'canvas'});
      //配置图表
      var option = {
				"left": "right",
				"center": [500, 450],
				"zoom": '0.9',
        "animation": true,
				"animationThreshold": 2000,
				"animationDuration": 1000,
				"animationEasing": "cubicOut",
				"animationDelay": 0,
				"animationDurationUpdate": 300,
				"animationEasingUpdate": "cubicOut",
				"animationDelayUpdate": 0,
				"color": [
					"#5873f9",
					"#fff9c1",
					"#f958c3",
					"#58d9f9",
				],
				"series": [
					{
						"type": "graph",
						"layout": "force",
						"symbolSize": this.symbolSize,
						"circular": {
							"rotateLabel": false
						},
						"force": {
							"repulsion": this.repulsion,
							"edgeLength": this.edgeLength,
							"gravity": 0.2,
							// "friction": 0.7
							// "layoutAnimation": false,
						},
						"label": {
							"show": false,
							"position": "top",
							"margin": 8,
							// "borderColor": 'inherit',
							// "shadowColor": 'transparent',
							// "shadowBlur": 0,
							// "textBorderWidth": 0
						},
						"lineStyle": {
							"color": 'source',
							"show": true,
							"width": this.width,
							"opacity": 0.7,
							"curveness": 0.3,
							"type": "solid"
						},
						"roam": true,
						"draggable": false,
						"focusNodeAdjacency": true,
						"data": this.nodes,
						"categories": this.categories,
						"edgeLabel": {
							"show": false,
							"position": "top",
							"margin": 8
						},
						"edgeSymbol": [
							null,
							null
						],
						"edgeSymbolSize": this.symbolSize,
						"links": this.links,
						"labelLayout": {
							"hideOverlap": true
						}
					}
				],
				"emphasis": {
					"shadowBlur": 0,
					"lineStyle": {
						"width": 4,
					},
					"label": {
						"show": false,
						// "textBorderColor": "rgba(255, 255, 255, 0.8)",
						// "textBorderWidth": 0,
						// "borderColor": 'inherit',
						// "shadowColor": 'transparent',
						// "shadowBlur": 0,
						// "textBorderWidth": 0
					},
				},
				"legend": [
					{
						"width": '100%',
						"data": this.mycategories,
						"selected": this.legend_categories,
						"show": true,
						// "padding": [0,0,2,0],
						"itemGap": 10,
						"itemWidth": 18,
						"itemHeight": 12,
						"textStyle": {
							"color": '#C1E2FF',
							"fontSize": 15,
							// "padding": [-5,0,0,0]
						},
						"left": '44%'
					}
				],
				"tooltip": {
					"show": true,
					"trigger": "item",
					"triggerOn": "mousemove|click",
					"axisPointer": {
						"type": "line"
					},
					"showContent": true,
					"alwaysShowContent": false,
					"showDelay": 0,
					"hideDelay": 100,
					"textStyle": {
						"fontSize": 14
					},
					"borderWidth": 0,
					"padding": 5
				},
			}
      this.myChart.setOption(option)
    },
		judge(){
			if(this.size>3000){
				this.repulsion = 3
				this.symbolSize = 5
				this.edgeLength = 3
				this.width = 2
			}else if(this.size>1900){
				this.repulsion = 10
				this.symbolSize = 6
				this.edgeLength = 12
				this.width = 6

			}else if(this.size>900){
				this.repulsion = 17
				this.symbolSize = 8
				this.edgeLength = 15
				this.width = 8
			}else if(this.size>500){
				this.repulsion = 25
				this.symbolSize = 12
				this.edgeLength = 20
				this.width = 8

			}else if(this.size>300){
				this.repulsion = 40
				this.symbolSize = 14
				this.edgeLength = 40
				this.width = 10

			}else{
				this.repulsion = 100
				this.symbolSize = 18
				this.edgeLength = 80
				this.width = 10
			}
		},
		setHighLight(company) {
			this.myChart.dispatchAction({
        type: 'highlight',
				// type: 'select',
        // seriesIndex: 0,
        // dataIndex: data.charPie3currentIndex
				name: company
      })
		}
  },
	watch: {
		'$route.query.cyljb': {
			// immediate: true,
			handler(v){
				this.name2 = v
				console.log('name2 ',v)
				if(v){
					this.getList()
				}
			}
		},
		'$route.query.xfly': function(v){
			this.name3 = v
			console.log('name3 ',this.name2,this.name3)
			if(v){
				this.getList()
			}
		},
		'$store.state.jinghe_companyName': function(){
			console.log('jinghe_companyName ',this.$store.state.jinghe_companyName)
			this.setHighLight(this.$store.state.jinghe_companyName)
		},
		'$route.query.zdwq':{
			immediate: true,
			handler(v){
				this.country = v
				this.name3 = this.$route.query.name3
				if(v){
					this.getList2()
				}
			}
		}
	},
  mounted(){
		// console.log(document.getElementById('tubiaomain'))
		this.myChart = this.$echarts.init(document.getElementById('tubiaomain'),'white', {renderer: 'canvas'});
		console.log('xxx');
		this.name2 = this.$route.query.cyljb
		this.name3 = this.$route.query.xfly

		this.getList()
		this.setHighLight('内蒙古包钢钢联股份有限公司')
  }
}
</script>
 
 
<style>
.nodata {
	/* width: 1000px;
	height: 400px; */
	color: #fff;
	font-size: 24px;
	position: relative;
	/* top: 0;
	right: 0; */
}
</style>